﻿@page "/component/input/TextDate" 

<Pager DataSource="@(new List<string>
                     {
                         "Demo","ViewMode","Format","Disabled","Inverted","Color"
                     })">
    <Body>
        <Header1 Divider>
            TextDate
            <SubHeader>
                Combine Input and Calendar to be a new component in form.
            </SubHeader>
        </Header1>
        <Message State="State.Warning">
            Only support <code>DateTime?</code> type.
        </Message>
        <PresentationPart Title="Demo">
            <RunTemplate>
                <Form Model="this">
                    <TextDate @bind-Value="Today" />
                </Form>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
DateTime? Today { get; set; }
```
```html
<Form Model=""this"">
    <TextDate bind-Value=""Today"" />
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>

        <PresentationPart Title="ViewMode">
            <RunTemplate>
                <Form Model="this">
                    <FieldGroup Span="SpanSize.Is3">
                        <Field>
                            <TextDate @bind-Value="Year" ViewMode="CalendarViewMode.Year" placeholder="Year" />
                        </Field>
                        <Field>
                            <TextDate @bind-Value="Month" ViewMode="CalendarViewMode.Month" placeholder="Month" />
                        </Field>
                        <Field>
                            <TextDate @bind-Value="Today" ViewMode="CalendarViewMode.Date" placeholder="Date" />
                        </Field>
                    </FieldGroup>
                </Form>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Form Model=""this"">
    <Fields Span=""@(3)"">
        <Field>
            <TextDate bind-Value=""Year"" ViewMode=""CalendarViewMode.Year"" placeholder=""Year"" />
        </Field>
        <Field>
            <TextDate bind-Value=""Month"" ViewMode=""CalendarViewMode.Month"" placeholder=""Month"" />
        </Field>
        <Field>
            <TextDate bind-Value=""Today"" ViewMode=""CalendarViewMode.Date"" placeholder=""Date"" />
        </Field>
    </Fields>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Format">
            <RunTemplate>
                <TextDate @bind-Value="Today" Format="MMM,dd,yyyy" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<TextDate bind-Value=""Today"" Format=""MMM,dd,yyyy"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Disabled">
            <RunTemplate>
                <Form Model="this">
                    <TextDate @bind-Value="Today" Disabled />
                </Form>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<TextDate bind-Value=""Today"" Disabled />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted">
            <RunTemplate>
                <Segment Inverted>
                    <Form Model="this">
                        <TextDate @bind-Value="Today" Inverted />
                    </Form>
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Segment Inverted>
    <Form Model=""this"">
        <TextDate bind-Value=""Today"" Inverted/>
    </Form>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
                <PresentationPart Title="Color">
            <RunTemplate>
                    <Form Model="this">
                        <TextDate @bind-Value="Today" Color="Color.Blue" Inverted/>
                        <TextDate @bind-Value="Today" Color="Color.Red"/>
                    </Form>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<TextDate bind-Value=""Today"" Color=""Color.Blue"" Inverted/>
<TextDate bind-Value=""Today"" Color=""Color.Red""/>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>
@code{
    DateTime? Today { get; set; }

    DateTime? Year { get; set; }
    DateTime? Month { get; set; }
}